<template>
  <div>
    <Contentheader :headerInfo="headerInfo" />

    <el-card>
      <el-form
        :model="userInfoForm"
        :rules="userRules"
        ref="userRuleForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="Username">
          <el-input v-model="userInfoForm.Username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="Realname">
          <el-input v-model="userInfoForm.Realname"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="Phone">
          <el-input v-model="userInfoForm.Phone"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="btn" type="primary" @click="saveUser">保存</el-button>
    </el-card>
  </div>
</template>

<script>
import Contentheader from "@/components/Contentheader";
export default {
  name: "Usermessage",
  components: { Contentheader },
  data() {
    var checkPhone = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regPhone =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regPhone.test(value)) {
        //合法的邮箱
        return callback();
      }
      callback(new Error("请输入合法的电话"));
    };
    return {
      // Contentheader组件的数据
      headerInfo: {
        title: "我的信息",
        rightInfo: {},
      },
      // 用户信息
      userInfoForm: JSON.parse(window.sessionStorage.getItem("token")),
      // 表单验证规则
      userRules: {
        Username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        Realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        Phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    //console.log(this.userInfoForm);
  },
  methods: {
    saveUser() {
      this.$refs.userRuleForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        alert("修改用户信息!");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
  height: 580px;
}

.btn {
  float: left;
}
</style>
